<script>
import {getMenuListApi} from '@/apis/loginApi.js'
    export default {
        // 菜单组件需要使用到的数据，所以只能是传参
        props: {
      
            // 做菜单的数据
            menuList: {
                type: Array,
                required: true
            }
        },
        data(){
            return {
                cc: null,
                arrll: [],
            }
        },
        // createElement === h函数
        // 使用js代码来构建html节点元素
        // createElement(tag?: string | Component, data?: VNodeData, children?: VNodeChildren[]): VNode
        render(c) {
            let arrs = this.makeMenu(c, this.menuList)
            // 创建的时候主菜单组件
            return c(
                'el-menu',
                {
                    // 设置菜单组件的属性
                    attrs: {
                        "default-active": this.cc ? this.cc : sessionStorage.getItem('hh') ? sessionStorage.getItem('hh') : 'HOME-01' ,
                        "background-color": "#2B2C40",
                        "text-color": "#fff",
                        "active-text-color": "#ffd04b",
                    }
                },
                // 菜单组件的子节点
                arrs
            )
        },
        async mounted() {
            let res = await getMenuListApi()
            if(res.code === 200) {
            this.arrll = res.data.rows
            }
        },  
        methods: {
            makeMenu(c, menuList) {
                let _this = this
                let arr = []
                // 对菜单数据进行循环，制作VNode对象
                menuList.forEach(it => {
                    let menu;
                    // 如果有子节点，那么必须使用el-submenu组件
                    // 否则使用el-menu-item组件
                    if (it.children) {
                        // 如果有子节点，递归实现子节点
                        let myChild = this.makeMenu(c, it.children)
                        menu = c(
                            'el-submenu',
                            {
                                attrs: {
                                    "index": it.id
                                },
                            },
                            [
                                c(
                                    'template',
                                    {
                                        slot: 'title'
                                    },
                                    [
                                        c(
                                            'i',
                                            {
                                                class: 'menu-icon',
                                                domProps: {
                                                    innerHTML: it.icon
                                                }
                                            }
                                        ),
                                        c(
                                            'span',
                                            [
                                                it.name
                                            ]
                                        )
                                    ]
                                ),
                                // 因为子节点必须是一个数组，而myChild是一个数组，所以需要展开数组和c方法组成一个新数组
                                ...myChild
                            ]
                        )
                    } else {
                        menu = c(
                            'el-menu-item',
                            {
                                attrs: {
                                    index: it.id
                                },
                                // 定义事件
                                on: {
                                    click() {
                                        _this.$router.push(it.path)
                                    }
                                }
                            },
                            [
                                it.name
                            ]
                        )
                    }
                    arr.push( menu )
                })
                return arr
            },
        },
        watch: {
            '$route':{
                immediate: true,
                handler(val) {
                    this.arrll = this.arrll.filter(it => !!it.path)
                    let cc = this.arrll.filter(it => it.path === val.path)
                    console.log(cc)
                    if(cc.length >= 1) {
                    this.cc = cc[0].id
                    sessionStorage.setItem('hh',cc[0].id)
                    console.log(this.cc)
                }
            }
        }
    }
}
</script>
